import { Button } from 'antd'
import { useContext } from 'react'
import './header.scss'
import { AppContext } from '../../../App'
import { TStore } from '../../../Type/type'
import { useNavigate } from 'react-router-dom'
const MenuIndex = () => {
  const navigate = useNavigate()
  const { store } = useContext<TStore>(AppContext)
  const logout = () => {
    localStorage.clear()
    navigate('/login')
  }
  return (
    <div className="header">
      <div className="header-title">ttzxh的博客管理系统</div>
      <div className="header-right">
        <img src={store.avatar} alt="头像" />
        <span className="header-right-realname">{store.realname}</span>
        <Button type="primary" danger onClick={logout}>
          退出登录
        </Button>
      </div>
    </div>
  )
}
export default MenuIndex
